<template>
  <div class="afterInvestDel-page">
    <pubChunk :mt="20">
      <span slot="title">历史净值</span>
      <div slot="headLeft" class="cutTableChart_icon">
        <el-button
          style="margin-left: 15px"
          class="bg-green search-box download-btn"
          size="small"
          @click="exportNetWorthHandle"
        >
          导出净值
        </el-button>
      </div>
      <div class="showChunk">
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_netWorth"
          stripe
          fit
          size="mini"
          :cell-style="{ padding: '8px 0' }"
          :header-cell-style="{ color: '#333' }"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="networthTime"
            label="净值日期"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="单位净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="累计净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="virNetWorthValue"
            label="虚拟净值"
            width="130"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="investEquity"
            label="资产金额(元)"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="investShare"
            label="资产份额(份)"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="复权累计净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="pnl"
            label="涨跌幅"
            align="center"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <span
                v-if="row && row.pnl != null"
                :class="Number(row.pnl) >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.pnl }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-if="total_netWorth > 0"
          style="padding-bottom: 0"
          :total="total_netWorth"
          :page.sync="listQuery.pageCurrent"
          :limit.sync="listQuery.limit"
          @pagination="getNetWorth"
        />
      </div>
    </pubChunk>
  </div>
</template>
<script>
import pubChunk from '@/components/investComn/pubChunk.vue'
import { exportNetWorth, netWorth } from '@/api/policyManage'
import { HistoryNetworthList } from '@/api/combManage'
import Pagination from '@/components/Pagination'
import mixin from './mixins'
export default {
  mixins: [mixin],
  components: { pubChunk, Pagination },
  props: {
    titleDataType: {
      type: String | Number,
      default: 0
    },
  },
  data() {
    return {
      params: {
        compositionId: "",
      },
      listQuery: {
        pageCurrent: 1,
        limit: 10,
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,
      listLoading_netWorth: false,
    };
  },
  methods: {
    init(strategy_dels) {
      this.strategy_dels = strategy_dels;
      this.getNetWorth(); // 历史净值
    },
    getNetWorth() {
      this.listLoading_netWorth = true
      if(this.titleDataType) {
        HistoryNetworthList({
          compositionId: this.compositionId,
          ...this.listQuery,
          userId: this.userId,
        }).then((res) => {
          this.listLoading_netWorth = false
          console.log('历史净值', res)
          this.list_netWorth = res.body.list
          this.total_netWorth = res.body.total
        })
      }else {
        netWorth({
          userId: this.userId,
          networthModel: this.titleDataType,
          strategyId: this.strategyId,
          ...this.listQuery,
        }).then((res) => {
          this.listLoading_netWorth = false
          console.log('历史净值', res)
          this.list_netWorth = res.body
          this.total_netWorth = res.count
        })
      }
    },
    exportNetWorthHandle() {
      // 下载净值案例
      exportNetWorth({ contextStatus: 0, contextId: this.strategyId }).then(
        (res) => {
          const content = res;
          const blob = new Blob([content]);
          const fileName =
            this.strategy_dels.strategyName + "净值（策略）.xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.afterInvestDel-page {
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
  }
}
</style>
